<template>
	<view class="content">
		<view class="ziTabList">
			<view class="zili" v-for="(item,index) in typeList" :key="index" @click="showCate(item)">
				<view class="ziTitle">
					{{item.categoryName}}
				</view>
				<view class="ziNumber">
					<text>{{item.num}}</text>(台)
				</view>
			</view>
		</view>
		
		<view class="sheBox">
			<view class="sheTitle">
				授权客户设备
			</view>
			
			<view class="sheTabList">
				<view :class="suo == index?'current':''" @click="showRoom(item,index)" class="sheli" v-for="(item,index) in treeList" :key="index">
					<view class="sheFloor">
						{{item.buildingName}}
					</view>
					<view class="sheNumber">
						({{item.totalDeviceCount}}台)
					</view>
				</view>
			</view>
			
			<view class="sheContent">
				<view class="sheLocation">
					<view @click="showDevice(item,index)" class="lotxt" :class="floorIndex == index?'active':''" v-for="(item,index) in secondList" :key="index">
						{{item.floorName}}<text v-if="floorIndex == index">({{item.totalDeviceCount}}台)</text>
					</view>
				</view>
				
				<view class="sheInfo">
					<view class="shevo" v-for="(item,index) in listData" :key="index">
						<view class="voTitle">
							{{item.roomIdentifier}}({{item.deviceCount}}台)
						</view>
						
						<view class="sheList">
							<view @click="goDetail(sitem)" class="shexx" v-for="(sitem,sindex) in item.deviceList" :key="sindex">
								<view class="sheImg">
									<image src="https://czjy.jorse.xyz/images/goods.png" mode=""></image>
								</view>
								
								<view class="sheWrap">
									<view class="kong">
										{{sitem.deviceName}}
										<text>{{sitem.categoryName}}</text>
										<text v-if="sitem.devicePower != null">{{sitem.devicePower}}</text>
									</view>
									<view class="kongTxtt">
										机器编号：{{sitem.deviceCode}}
									</view>
									<view class="kongTxtt">
										安装时间：{{sitem.manufactureDate}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getDeviceList, getCategory, getFloorList, getDeviceTree } from '@/api/login.js';
	export default {
		data() {
			return {
				suo: 0,
				floorIndex: 0,
				listData: [],
				typeList: [],
				floorList: [],
				treeList: [],
				secondList: [],
				queryItem:{
					categoryId: '',
					enterpriseId: 1
				}
			}
		},
		onLoad(opt) {
			// this.getTypeList();
			// this.getList();
			// this.getFloor();
			this.getTreeList();
		},
		methods: {
			goDetail(val){
				console.log(val);
				uni.navigateTo({
					url:'/pages/mine/deviceInfo?idd=' + val.id
				})
			},
			getTreeList(){
				getDeviceTree(uni.getStorageSync('userInfo').companyId).then(res=>{
					if(res.code == 200) {
						this.typeList = res.data.categoryStats;
						this.treeList = res.data.hierarchicalStats;
						this.secondList = res.data.hierarchicalStats[0].floors;
						this.listData = this.secondList[0].rooms;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			showRoom(val,index){
				this.suo = index;
				this.showDevice(val.floors,index);
			},
			showDevice(val,index){
				this.floorIndex = index;
				this.listData = val[0].rooms;
				this.secondList = val;
				this.floorIndex = 0;
			},
			getFloor(){
				getFloorList().then(res=>{
					if(res.code == 200) {
						this.floorList = res.rows;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			showCate(val){
				this.queryItem.categoryId = val.id;
				this.getList();
			},
			getTypeList(){
				getCategory().then(res=>{
					if(res.code == 200) {
						this.typeList = res.rows;
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			getList(){
				// getDeviceList(this.queryItem).then(res=>{
				// 	if(res.code == 200) {
				// 		this.listData = res.rows;
				// 	} else {
				// 		uni.$u.toast(res.msg);
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color:#F5F5F5;
	.sheBox{
		.sheTitle{
			padding:40rpx 0 24rpx 24rpx;font-weight:500;
			@include baseFont(30rpx,#333,32rpx);background-color:#fff;
		}
		.sheContent{
			@include flx;justify-content: space-between;
			.sheLocation{
				width:192rpx;
				.lotxt{
					@include baseFont(28rpx,#262626,104rpx);text-align: center;position: relative;
				}
				.active{
					background-color:#fff;color:#3671E9;
					text{
						font-size:24rpx;
					}
				}
				.active::after{
					content:'';width:6rpx;height:32rpx;background-color:#3671E9;border-radius:4rpx;
					position: absolute;left:0;top:50%;transform: translateY(-50%);
				}
			}
			.sheInfo{
				background-color:#fff;width: calc(100% - 192rpx);padding-left:20rpx;
				.shevo{
					margin-bottom:40rpx;
					.voTitle{
						@include baseFont(28rpx,#333,40rpx);margin-bottom:24rpx;
					}
					.sheList{
						.shexx{
							@include flx;margin-bottom:28rpx;
							.sheImg{
								image{
									display: block;width:124rpx;height:124rpx;border-radius:8rpx;
								}
							}
							.sheWrap{
								margin-left:24rpx;
								.kong{
									@include baseFont(28rpx,#262626,40rpx);font-weight:500;margin-bottom:6rpx;@include flx;align-items: center;
									text{
										display: block;width:62rpx;height:30rpx;border: 0.5px solid rgba(196, 196, 196, 1);
										border-radius:4rpx;@include baseFont(20rpx,#262626,30rpx);text-align: center;margin-left:12rpx;
									}
								}
								.kongTxtt{
									@include baseFont(26rpx,#9C9B9B,36rpx);margin-bottom:6rpx;
								}
								.kongTxtt:last-of-type{
									margin-bottom:0;
								}
							}
						}
					}
				}
				
			}
		}
		.sheTabList{
			background-color:#fff;padding:0 0 24rpx 24rpx;@include flx;
			.sheli{
				width:152rpx;height:100rpx;background-color:#F4F8FB;border-radius:6rpx;text-align: center;margin-right:16rpx;
				display: flex;flex-direction: column;justify-content: center;
				.sheFloor{
					@include baseFont(28rpx,#333,36rpx);
				}
				.sheNumber{
					@include baseFont(24rpx,#9C9B9B,32rpx);margin-top:2;
				}
			}
			.current{
				background-color:#6799FF;
				.sheFloor,.sheNumber{
					color:#fff;
				}
			}
		}
	}
	.ziTabList{
		@include flx;padding:24rpx 0 32rpx 24rpx;background-color:#fff;margin-bottom:16rpx;
		.zili{
			width:200rpx;height:136rpx;background-color:#4460B8;border-radius:16rpx;margin-right:16rpx;
			.ziTitle{
				@include baseFont(26rpx,rgba(255, 255, 255, 0.92),36rpx);margin:24rpx 0 12rpx 24rpx;
			}
			.ziNumber{
				@include baseFont(26rpx,rgba(255, 255, 255, 0.92),36rpx);margin-left:24rpx;
				text{
					color:#fff;font-size:48rpx;
				}
			}
		}
		.zili:nth-of-type(2){
			background-color:#08C4CD;
		}
		.zili:nth-of-type(3){
			background-color:#40C5A6;
		}
	}
}
</style>
